<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>影片列表</title>

	<link rel="stylesheet" href="../layui/css/layui.css">
	<link rel="stylesheet" href="css/manage.css">

	<style>
		/*设置表格表头字体样式*/
		.layui-table th {
			/*表头内容居中显示*/
			text-align: center;
			/*字体加粗*/
			font-weight: bold;
		}

		/*设置表格宽度*/
		.layui-table {
			width: 98%;
		}

		/*设置鼠标经过图标变色*/
		.layui-icon:hover {
			color: red;
		}

		/*搜索框*/
		.search {
			display: inline-block;
			height: 40px;
			line-height: 1.2;
			width: 220px;
			padding: 0 40px 0 20px;
			border: 1px solid #ccc;
			font-size: 14px;
			border-radius: 30px;
			background-color: #faf8fa;
			overflow: hidden;
			color: #333;

		}

		/*搜索按钮*/
		.sub {
			display: inline-block;
			position: absolute;
			left: 358px;
			top: 21px;
			height: 40px;
			width: 40px;
			background-color: #cccccc;
			border-radius: 30px;
			background-image: url('images/query.png');
			cursor: pointer;
			border: none;
		}

		.sub:hover {
			background-color: #6699FF;
		}

		.bb {
			display: inline-block;
			height: 35px;
			line-height: 1.2;
			width: 30px;
			text-align: center;
			padding: 0 10px 0 10px;
			border: 1px solid #ccc;
			font-size: 14px;
			background-color: #faf8fa;
			color: #333;
			overflow: hidden;
		}

		/* 设置页面右上角切换分页显示按钮的样式 */
		.qiehuan {
			display: inline-block;
			position: absolute;
			right: 25px;
		}

		.not {
			padding: 4px;
			background-color: orange;
			color: white;
			border-radius: 4px;
			font-size: 7px;
		}

		.has {
			padding: 4px;
			background-color: #26ce61;
			color: white;
			border-radius: 4px;
			font-size: 7px;
		}

		.c {
			width: 600px;
		}
		/* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
	</style>
</head>

<body>
	<div id="film-list" v-cloak>
		<div style="margin-top:20px;">
			<a><button type="button" class="layui-btn layui-btn-normal" id="addFilm"><i
						class="layui-icon">&#xe654;</i>添加电影</button></a>
			<!-- <a href="ListAllFilmServlet.do"><button type="button" class="layui-btn layui-btn-normal"><i
						class="layui-icon">&#xe669;</i>刷新</button></a>&nbsp;&nbsp;&nbsp; -->
			<div style="display:inline-block;">
				<form>
					<input type="text" id="cond" value="" required placeholder="找影片， 影剧" class="search">
					<input class="sub" type="button" value="" @click="selectByLike">

				</form>
			</div>
			
			<div class="qiehuan" @click="checkPager">
				<button class="layui-btn layui-btn-normal" id="check">分页显示</button>
			</div>
			
		</div><br/>



		<table class="layui-table">

			<thead>
				<tr>
					<th>ID</th>
					<th>电影名称</th>
					<th>封面</th>
					<th>电影类型</th>
					<th>国家</th>
					<th>导演</th>
					<th>时长</th>
					<th>语言</th>
					<th>发行年份</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>

			<tbody>
				<tr align="center" v-for="(f,i) in films" :key="i">
					<td>{{f.filmId}}</td>
					<td>{{f.filmName}}</td>
					<td><img width="100px" height="150px" class="picture-thumb" v-bind:src="'../images/'+f.filmPicture"></td>
					<td>{{f.filmType}}</td>
					<td>{{f.filmCountry}}</td>
					<td>{{f.filmDirector}}</td>
					<td>{{f.filmLong}}</td>
					<td>{{f.filmLanguage}}</td>
					<td>{{f.filmYear}}</td>
					<td><span :class="{not:f.filmStatus==0,has:f.filmStatus==1}">{{f.filmStatus==0?'未发布':'已发布'}}</span></td>
					<td>
						<a @click="update(f)"><i class="layui-icon" style="font-size: 18px;"
								title="修改">&#xe642;</i></a>
						<a @click="del(i,f.filmId,f.filmStatus)"><i class="layui-icon" style="font-size: 18px;"
								title="删除">&#xe640;</i></a>
					</td>
				</tr>

				<tr v-if="films==null || films.length==0">
					<td colspan="11" align="center">无数据</td>
				</tr>
			</tbody>

		</table>

		<div align="center" v-if="isShow==true" style="margin-bottom: 50px;margin-top: 20px;">
			<a><button class="layui-btn" @click="first">首页</button></a>
			<a><button class="layui-btn" @click="up">上一页</button></a>
			<a><button class="layui-btn" @click="down">下一页</button></a>
			<a><button class="layui-btn" @click="end">尾页</button></a>

			<div style="display: inline-block;">
				<input type="text" v-bind:value="currentPage" class="bb" />
				<input type="button" value="GO" class="layui-btn" @click="go"/>
			</div>
		</div>


		<!-- 添加影片弹出页面 -->
		<form class="layui-form" id="film-add" style="display: none;margin-top: 20px;">
			<div class="layui-form-item">
				<label class="layui-form-label">影片名称</label>
				<div class="layui-input-block">
					<input type="text" id="filmname" required class="layui-input required c">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">影片类型</label>
				<div class="layui-input-block">
					<input type="text" id="filmtype" required class="layui-input required c">
				</div>
			</div>


			<div class="layui-form-item">
				<label class="layui-form-label">国家</label>
				<div class="layui-input-block" style="width:600px">
					<select id="country" lay-filter="country" required>
						<option value=""></option>
						<option value="中国大陆">中国大陆</option>
						<option value="中国香港">中国香港</option>
						<option value="中国台湾">中国台湾</option>
						<option value="美国">美国</option>
						<option value="英国">英国</option>
						<option value="日本">日本</option>
						<option value="韩国">韩国</option>
						<option value="德国">德国</option>
						<option value="法国">法国</option>
						<option value="泰国">泰国</option>
						<option value="加拿大">加拿大</option>
						<option value="俄罗斯">俄罗斯</option>
						<option value="意大利">意大利</option>
						<option value="西班牙">西班牙</option>
						<option value="澳大利亚">澳大利亚</option>
						<option value="印度">印度</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">导演</label>
				<div class="layui-input-block">
					<input type="text" id="director" required class="layui-input required c">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">时长（分钟）</label>
				<div class="layui-input-block">
					<input type="text" id="filmlong" required class="layui-input required c">
				</div>
			</div>


			<div class="layui-form-item">
				<label class="layui-form-label">语言</label>
				<div class="layui-input-block" style="width:600px">
					<select id="language" lay-filter="language" required>
						<option value=""></option>
						<option value="普通话">普通话</option>
						<option value="粤语">粤语</option>
						<option value="英语">英语</option>
						<option value="中英">中英</option>
						<option value="俄语">俄语</option>
						<option value="韩语">韩语</option>
						<option value="日语">日语</option>
						<option value="泰语">泰语</option>
						<option value="西班牙语">西班牙语</option>
						<option value="意大利语">意大利语</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">发行年份</label>
				<div class="layui-input-block">
					<input type="text" name="filmdate" id="date" required placeholder="yyyy-MM-dd" lay-verify="date"
						autocomplete="off" class="layui-input c">
				</div>
			</div>



			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">影片简介</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容" class="layui-textarea c" id="desc" required></textarea>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">海报</label>
				<div class="layui-input-block">
					<div class="layui-upload">
						<img id="pic" src="../images/picture.jpg" style="width:100px;height:150px" />

						<button type="button" class="layui-btn" id="test01">
							<i class="layui-icon">&#xe67c;</i>浏览图片
						</button>
						<button type="button" class="layui-btn" id="btn_ok">
							<i class="layui-icon">&#xe67c;</i>确定上传
						</button>
						<input type="hidden" name="filmpicture" id="fileName" value="picture.jpg">
					</div>
				</div>
			</div>

			<!-- <div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" class="layui-btn"><i
							class="layui-icon">&#xe621;</i>立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary"><i
							class="layui-icon">&#xe9aa;</i>重置</button>
				</div>
			</div> -->
		</form>


		<!-- 修改影片弹出页面层 -->
		<form class="layui-form" id="film-update" style="display: none;margin-top: 20px;">
			<div class="layui-form-item">
				<label class="layui-form-label">影片名称</label>
				<div class="layui-input-block">
					<input type="text" id="filmname2" required class="layui-input required c"
						v-bind:placeholder="currentFilm.filmName" v-bind:value="currentFilm.filmName">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">影片类型</label>
				<div class="layui-input-block">
					<input type="text" id="filmtype2" required class="layui-input required c"
						v-bind:placeholder="currentFilm.filmType" v-bind:value="currentFilm.filmType">
				</div>
			</div>



			<div class="layui-form-item">
				<label class="layui-form-label">国家</label>
				<div class="layui-input-block" style="width:600px">
					<select id="country2" lay-filter="country2" required>
						<option v-bind:value="currentFilm.filmCountry">{{currentFilm.filmCountry}}</option>
						<option value="中国大陆">中国大陆</option>
						<option value="中国香港">中国香港</option>
						<option value="中国台湾">中国台湾</option>
						<option value="美国">美国</option>
						<option value="英国">英国</option>
						<option value="日本">日本</option>
						<option value="韩国">韩国</option>
						<option value="德国">德国</option>
						<option value="法国">法国</option>
						<option value="泰国">泰国</option>
						<option value="加拿大">加拿大</option>
						<option value="俄罗斯">俄罗斯</option>
						<option value="意大利">意大利</option>
						<option value="西班牙">西班牙</option>
						<option value="澳大利亚">澳大利亚</option>
						<option value="印度">印度</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">导演</label>
				<div class="layui-input-block">
					<input type="text" id="director2" required class="layui-input required c"
						v-bind:placeholder="currentFilm.filmDirector" v-bind:value="currentFilm.filmDirector">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">时长（分钟）</label>
				<div class="layui-input-block">
					<input type="text" id="filmlong2" required class="layui-input required c"
						v-bind:placeholder="currentFilm.filmLong" v-bind:value="currentFilm.filmLong">
				</div>
			</div>


			<div class="layui-form-item">
				<label class="layui-form-label">语言</label>
				<div class="layui-input-block" style="width:600px">
					<select id="language2" lay-filter="language2" required>
						<option v-bind:value="currentFilm.filmLanguage">{{currentFilm.filmLanguage}}</option>
						<option value="普通话">普通话</option>
						<option value="粤语">粤语</option>
						<option value="英语">英语</option>
						<option value="中英">中英</option>
						<option value="俄语">俄语</option>
						<option value="韩语">韩语</option>
						<option value="日语">日语</option>
						<option value="泰语">泰语</option>
						<option value="西班牙语">西班牙语</option>
						<option value="意大利语">意大利语</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">上映时间</label>
				<div class="layui-input-block">
					<input type="text" name="filmdate2" id="date2" required v-bind:placeholder="currentFilm.filmYear"
						v-bind:value="currentFilm.filmYear" lay-verify="date" autocomplete="off" class="layui-input c">
				</div>
			</div>



			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">影片简介</label>
				<div class="layui-input-block">
					<textarea v-bind:placeholder="currentFilm.filmDesc" class="layui-textarea c" id="desc2"
						required>{{currentFilm.filmDesc}}</textarea>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">海报</label>
				<div class="layui-input-block">
					<div class="layui-upload">
						<img id="pic2" v-bind:src="'../images/'+currentFilm.filmPicture" style="width:100px;height:150px" />

						<button type="button" class="layui-btn" id="test02">
							<i class="layui-icon">&#xe67c;</i>浏览图片
						</button>
						<button type="button" class="layui-btn" id="btn_ok2">
							<i class="layui-icon">&#xe67c;</i>确定上传
						</button>
						<input type="hidden" name="filmpicture2" id="filename2" v-bind:value="currentFilm.filmPicture">
					</div>
				</div>
			</div>

			<!-- <div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" class="layui-btn" lay-filter="demo1"><i
							class="layui-icon">&#xe621;</i>确认修改</button>
					<button type="reset" class="layui-btn layui-btn-primary"><i
							class="layui-icon">&#xe9aa;</i>重置</button>
				</div>
			</div> -->
		</form>
	</div>

	<script src="../js/jquery-1.12.4.min.js"></script>
	<script src="../js/Vue.js"></script>
	<script src="../layer/layer.js"></script>
	<script src="../layui/layui.js"></script>
	<script src="js/manage-film.js"></script>

	<script>
		// 解决下拉列表框不显示
		// layui.use('form', function () {
		// 	var form = layui.form;
		// 	form.render();
		// });

		//日期表选择
		layui.use(['form', 'layedit', 'laydate'], function () {
			var form = layui.form
				, layer = layui.layer
				, layedit = layui.layedit
				, laydate = layui.laydate;

			//日期
			laydate.render({
				elem: '#date',
				theme: '#088A68',
				trigger: 'click'   //解决闪退问题
			});

			laydate.render({
				elem: '#date2',
				theme: '#088A68',
				trigger: 'click'   //解决闪退问题
			});

		});



		// 影片添加弹出层
		$('#addFilm').on('click', function () {
			layer.open({
				type: 1,
				title: '添加影片',
				anim: 1,   // 动画
				resize: false,  // 是否允许拉伸改变宽高
				area: ['800px', '480px'], // 设置宽，高
				shadeClose: false, //点击遮罩关闭
				scrollbar: false,   // 屏蔽浏览器滚动（false: 则屏蔽）
				content: $("#film-add"),
				btn: ['确认', '取消'],
				btn1: function (index) {
					layer.close(index);
					layer.msg("哈哈");
				},
				btn2: function () {
					layer.msg("嘿嘿");
				}
			});
		});


		//电影海报的上传
		layui.use(['jquery', 'table', 'layer', 'form', 'upload'], function () {
			var upload = layui.upload;

			var uploadInst = upload.render({
				elem: '#test01',				//绑定浏览文件元素
				url: 'http://localhost:8080/cinema/api/FilmPictureUploadServlet.do', //实现上传功能的服务器端程序
				// accept: 'file',				//设置允许上传的文件类型
				bindAction: '#btn_ok', 		//绑定提交上传的按钮
				// exts: 'jpg|png|jpeg',			//设置允许上传的文件后缀
				// size: 20000,					//设计允许上传文件的大小，单位：KB
				field: "attach",				//绑定上传控件的字段名，便于服务器获取上传文件
				auto: false,					//设置不自动上传
				done: function (dto) {			//上传成功的回调
					if (dto.code == 200) {
						//res参数：服务器响应回来的数据，可以封装为responseData对象
						console.info(dto);
						//$("#pic").prop("src","${pageContext.request.contextPath}/upload/tx/"+res.data) ;
						//上传成功后，隐藏按钮，防止上传多次
						$("#btn_ok").hide();
						//上传成功后，把隐藏域里面的内容设置为获取的参数值
						$("#fileName").val(dto.msg);
						layer.msg('上传成功', { icon: 1 });
					
  						return;

					}


				},
				error: function () {			//上传失败的回调
					//请求异常回调
					layer.msg('图片上传失败~~', { icon: 5 });
				},
				choose: function (obj) {		//选择文件后的回调
					obj.preview(function (index, file, result) {
						//console.log(index); 	//得到文件索引
						//console.log(file); 		//得到文件对象
						//console.log(result); 	//得到文件base64编码，比如图片

						//显示图片
						$("#pic").prop("src", result);
					});

					//显示提交按钮
					$("#btn_ok").show();

				}
			});
		});
	</script>
</body>
</html>